<template>
  <div id="content" class="c-n-c-c" :style="{width: windowVisualWidth+'px',height:windowVisualHeight+'px'}">
    <div class="box-card r-n-c-c"
         :style="{width: windowVisualWidth * 0.75625 + 'px',height:windowVisualWidth * 0.65625 * 0.6 +'px',padding: windowVisualWidth * 0.05 + 'px'}">
      <div id="login_image" style="width: 450px;height: 348px">
        <img src="../../public/image/login.png" style="width: 450px;height: 348px" alt=""/>
      </div>
      <div id="login_content" class="c-n-fs-c">
        <div id="login_title">
          <div class="r-n-fs-c">欢迎登录</div>
          <div class="r-n-fs-c">无人机巡检后台管理系统</div>
        </div>
        <div id="login_form">
          <label class="box-card-input-div c-n-c-c">
            <input class="box-card-input" size="large" v-model="form.account" name="account" autocomplete="true"
                   placeholder="账户"/>
          </label>
          <label class="box-card-input-div c-n-c-c">
            <input class="box-card-input" size="large" v-model="form.password" type="password" name="password"
                   autocomplete="true" @keypress.enter="login" placeholder="密码"/>
          </label>
        </div>
        <div class="submit">
          <Button type="primary" size="large" long @click="login">登录</Button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState} from "vuex"
import axios from "axios";
import {createWebSocket,HeartCheck,webSocketReconnect} from "@/global/webSocket";
import {Request} from "@/global/config";

export default {
  name: "Login",
  computed: mapState(["userInfo","url", "host","resourceHost", "isLogin", "windowVisualWidth", "windowVisualHeight", "isLogin"]),
  data() {
    return {
      fullScreenLoading: true,
      form: {
        account: "",
        password: ""
      }
    }
  },
  mounted: function () {
    this.fullScreenLoading = false;
  },
  methods: {
    login() {
      let self = this;
      axios.post(self.url.user_login, self.form).then(function (response) {
        if (response.data.state === 200) {
          if (response.data.content.roleId === 1){
            let startLocation = self.$router.history._startLocation;
            if (startLocation === '/'){
              self.$router.push('/admin/dashboard');
            }
            let {token, id, projectId,avatarUrl,nickName,resourceHost} = response.data.content;
            localStorage.setItem("u-token", token);
            localStorage.setItem("u-uid", id);
            localStorage.setItem("u-projectId", projectId);
            localStorage.setItem("avatarUrl",avatarUrl);
            localStorage.setItem("nickName",nickName);
            axios.defaults.headers.common["u-token"] = token;
            axios.defaults.headers.common["u-uid"] = id;
            axios.defaults.headers.common["u-projectId"] = projectId;
            self.userInfo.avatarUrl = avatarUrl;
            self.userInfo.nickName = nickName;
            localStorage.setItem("resourceHost",resourceHost);
            self.$store.state.resourceHost = resourceHost;
            createWebSocket();
            self.$Message.success("登录成功");
            Request.selectProjectList().then((projectRsp)=>{
              self.$store.state.projectList = projectRsp.data.content.records;
              for (let project of projectRsp.data.content.records) {
                self.$store.state.projectMap.set(project['id'],project['projectName']);
                self.$store.state.projectDetailsMap.set(project['id'],project);
              }
              self.$store.state.isLogin = true;
            })
          }else {
            self.$Message.error("账号权限错误");
          }
        } else {
          self.$Message.error("用户名或密码错误");
        }
      })
    }
  }
}
</script>

<style scoped>
#content {
  position: relative;
  background: url("../../public/image/login-back.png") no-repeat;
  background-size: cover;
}

#content div {
  color: #606266;
}

.box-card {
  position: relative;
  border-radius: 10px;
  background-color: #FFFFFF;
  padding: 100px 150px;
  border: none;
}

#login_image {

}

#login_content {
  height: 348px;
  margin-left: 50px;
}

#login_title div {
  width: 308px;
  height: 45px;
  line-height: 45px;

  font-size: 28px;
  color: #333333 !important;
  text-align: left;
  font-family: PingFangSC-Regular, PingFang SC, serif;

  position: relative;
}

#login_form {
  padding: 63px 0;
}

.box-card-input-div {
  width: 308px;
  height: 40px;
  border-radius: 2px;
  background: #2e2f30;
}

.box-card-input-div:last-of-type {
  margin-top: 10px;
}

.submit {
  height: 40px;
  width: 308px;
  line-height: 40px;
}

.box-card-input {
  font-size: 16px;
  padding: 6px 7px;
  height: 40px;
  display: inline-block;
  width: 100%;
  line-height: 1.5;
  background-image: none;
  position: relative;
  cursor: text;
  outline: none;
  transition: border .2s ease-in-out, background .2s ease-in-out, box-shadow .2s ease-in-out;
  border-radius: 2px;
  color: #333333;
  border: 1px solid #C9C9C9;
}

.ivu-btn-primary {
  color: #fff;
  background-color: #2d8cf0b3;
  border-color: #2d8cf0b3;
}

.ivu-btn-primary:hover {
  color: #fff;
  background-color: #2D8CF0;
  border-color: #2D8CF0;
}
</style>